<div
    class="tour-step"
    @fade
    [class.d-none]="!isVisible"
    offset="4"
    [position]="currentStep.position || 'bottom-start'"
    spaceX="0"
    spaceY="0"
    [sqxAnchoredTo]="currentElement!"
    *sqxModal="currentElement; closeAuto: false">
    <div class="tour-progress" [style.width]="progress"></div>

    <div class="tour-body">
        <div class="row g-2">
            <div class="col-auto">
                <div class="squid d-flex align-items-center justify-content-center bordered"><img src="./images/squid.svg" /></div>
            </div>

            <div class="col">
                <h5 inline="true" [sqxMarkdown]="currentStep.title | sqxTranslate"></h5>

                <div [sqxMarkdown]="currentStep.content | sqxTranslate"></div>
            </div>

            <div class="col-auto"><button class="btn btn-sm btn-close" (click)="tourService.end()" type="button"></button></div>
        </div>
    </div>

    @if (hasNext || hasPrev || hasFinish || currentStep.hideAll || currentStep.hideThis) {
        <div class="tour-footer">
            <div class="d-flex justify-content-between">
                <div class="d-flex pe-4">
                    @if (hasPrev) {
                        <button class="btn btn-outline-secondary btn-sm me-2" (click)="tourService.prev()">
                            {{ "common.prev" | sqxTranslate }}
                        </button>
                    }

                    @if (currentStep.hideAll) {
                        <button class="btn btn-outline-danger btn-sm" (click)="currentStep.hideAll()">
                            {{ "tour.tooltipStop" | sqxTranslate }}
                        </button>
                    }
                </div>

                <div class="d-flex ps-4">
                    @if (hasNext) {
                        <button class="btn btn-outline-secondary btn-sm" (click)="tourService.next()">
                            {{ "common.next" | sqxTranslate }}
                        </button>
                    }

                    @if (hasFinish) {
                        <button class="btn btn-outline-success btn-sm" (click)="tourService.end()">
                            {{ "common.finish" | sqxTranslate }}
                        </button>
                    }

                    @if (currentStep.hideThis) {
                        <button class="btn btn-outline-success btn-sm" (click)="currentStep.hideThis()">
                            {{ "tour.tooltipConfirm" | sqxTranslate }}
                        </button>
                    }
                </div>
            </div>
        </div>
    }
</div>
